<template>
  <div class="pad">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
      <van-swipe-item v-for="(item, index) in swipe" :key="index">
        <img v-lazy="item.src">
      </van-swipe-item>
    </van-swipe>

    <!-- 商品详情 -->
    <div class="goodInfo">
      <div class="tit">{{goodsDetail.title}}</div>
      <p>市场价：
        <span>{{goodsDetail.market_price}}</span>
        销售价
        <em>￥{{goodsDetail.sell_price}}</em>
      </p>
      <!-- 购买数量 -->
      <div class="select">
        <span>购买数量</span>
        <!-- 步进器 -->
        <van-stepper v-model="value" min="1" max="9" integer input-width="40px" button-size="32px"/>
      </div>
      <!-- 购买&添加到购物车按钮 -->
      <div>
        <!-- 立即购买按钮 -->
        <van-button class="btn" type="info" @click="go">立即购买</van-button>
        <!-- 加入购物车按钮 -->
        <van-button class="btn" type="danger" @click="adds">加入购物车</van-button>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="goodParams">
      <div class="tit">商品参数</div>
      <div class="body">
        <p>商品货号: {{goodsDetail.goods_no}}</p>
        <p>库存情况: {{goodsDetail.stock_quantity}}件</p>
        <p>上架时间: {{goodsDetail.add_time}}</p>
      </div>
      <div class="btns">
        <!-- 图文介绍按钮 -->
        <van-button class="btn" plain color="#7232dd" block :to="'/goodsdesc/'+id">图文介绍</van-button>
        <!-- 商品评论按钮 -->
        <van-button class="btn" plain color="pink" block :to="'/goodscomments/'+id">商品评论</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  created () {
    this.getSwipe()
    this.getGoodsDetail()
  },
  data () {
    return {
      // 商品id
      id: this.$route.params.id,
      // 步进器绑定的购买数量
      value: 1,
      // 轮播图图片
      swipe: [],
      // 当前商品的详细信息
      goodsDetail: {}
    }
  },
  methods: {
    // 获取轮播图图片
    async getSwipe () {
      const { data: res } = await this.$axios.get('/api/getthumimages/' + this.id)
      this.swipe = res.message
      // console.log(this.swipe)
    },
    // 获取商品详情相关信息
    async getGoodsDetail () {
      const { data: res } = await this.$axios.get('/api/goods/getinfo/' + this.id)
      // console.log(res.message[0])
      this.goodsDetail = res.message[0]
    },
    // 加入购物车
    adds () {
      // 调用添加方法
      this.add({
        // 商品id
        id: this.id,
        count: this.value
      })
      this.$toast.success('已添加到购物车')
    },
    // 立即购买
    go () {
      this.adds()
      this.$router.push('/shopcar')
    },
    ...mapMutations(['add'])
  },
  computed: {
  }
}
</script>
<style scoped lang="less">
.pad{
  padding: 10px;
  padding-bottom: 60px;
}
.my-swipe{
  height: 230px;
  border: 1px solid #ccc;
  border-radius: 3px;
  img{
    width: 200px;
    height: 200px;
    display: block;
    margin: auto;
  }
}
.goodInfo{
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  p{
    font-size: 14px;
    margin: 15px 0 10px  10px;
    color: #8f8f94;
    span{
      text-decoration: line-through;
      margin: 0 10px;
    }
    em{
      font-weight: 700;
      font-size: 16px;
      color: red;
      font-style: normal;
    }
  }
}
.tit{
  border-bottom: 1px solid #ccc;
}
.select{
  padding: 10px;
  font-size: 14px;
  color: #8f8f94;
}
.van-stepper{
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}
.btn{
  margin: 3px 3px;
  height: 33px;
  line-height: 33px;
}
.goodParams{
  margin-top: 10px;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #ccc;
  .tit{
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .body{
    border-bottom: 1px solid #ccc;
    padding: 15px;
    p{
      font-size: 14px;
      margin: 10px 0;
      color: #8f8f94;
    }
  }
  .btns{
    margin-top: 10px;
    .btn{
      height: 39px;
      line-height: 39px;
      border-radius: 5px;
      margin: 5px 0;
    }
  }
}
</style>
